<template>
  <div class="headerTitle">客户信息</div>
  <div class="mainArea">
    <div class="areaItem">
      <div class="itemTitle">姓名</div>
      <div class="itemValue">
        <div>{{localSinInfo.custName}}</div>
      </div>
    </div>
    <div class="areaItem">
      <div class="itemTitle">身份证</div>
      <div class="itemValue">
        <div>{{localSinInfo.cardNo}}</div>
      </div>
    </div>
    <div class="areaItem">
      <div class="itemTitle">联系电话</div>
      <div class="itemValue">
        <div>{{localSinInfo.custPhone}}</div>
      </div>
    </div>
    <div class="areaItem">
      <div class="itemTitle">授信额度</div>
      <div class="itemValue">
        <div>2300000.00元</div>
      </div>
    </div>
    <div class="areaItem">
      <div class="itemTitle">利率</div>
      <div class="itemValue">
        <div>3.87%(年化)</div>
      </div>
    </div>
    <div class="areaItem">
      <div class="itemTitle">授信期限</div>
      <div class="itemValue">
        <div>36个月</div>
      </div>
    </div>
    <div class="areaItem">
      <div class="itemTitle">还款方式</div>
      <div class="itemValue">
        <div>按月结息到期一次性还本</div>
      </div>
    </div>
    <div class="areaItem">
      <div class="itemTitle">用途</div>
      <div class="itemValue">
        <div>个人消费</div>
      </div>
    </div>
  </div>

  <div class="headerTitle">签约短信</div>
  <div class="mainArea">
    <div class="areaItem">
      <div class="itemTitle">借合同</div>
      <div class="itemValue">包子</div>
      <div class="itemBtn">
        <div class="btn">未签署</div>
        <div class="btn">发送签约短信</div>
      </div>
    </div>
    <div class="areaItem">
      <div class="itemTitle">借合同</div>
      <div class="itemValue">包子</div>
      <div class="itemBtn">
        <div class="btn">未签署</div>
        <div class="btn">发送签约短信</div>
      </div>
    </div>
  </div>

  <div class="headerTitle">现场签约视频及其他材料</div>
  <div class="mainArea">
    <up-textarea
      v-model="moreInfo"
      placeholder="请输入"
      autoHeight
      border="none"
    ></up-textarea>
    <div class="addImgArea">
      <img
        src="../../static/face/new_icon_01.png"
        alt=""
        class="chooseImg"
        @click="chooseImg"
      />
    </div>
    <div class="btnArea">
      <div class="btn close">关闭</div>
      <div class="btn submit">保存信息发送签署信息</div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import * as http from "../../utils/http";
const localSinInfo = reactive({});
onLoad((options) => {
  let params = JSON.parse(options.value);
  localSinInfo.custName = params.custName;
  localSinInfo.cardNo = params.cardNo;
  localSinInfo.custPhone = params.custPhone;
});

// 选择图片
const chooseImg = () => {
  wx.chooseMedia({
    count: 9,
    mediaType: "mix",
    sourceType: "album",
    sizeType: ["original", "compressed"],
    success: (res) => {
      console.log(res);
    },
    fail: (err) => {
      console.log(err);
    },
  });
};
</script>

<style scoped lang="scss">
.headerTitle {
  font-size: 24rpx;
  color: #666666;
  padding-top: 20rpx;
  padding-left: 34rpx;
  padding-bottom: 10rpx;
}
.mainArea {
  background-color: #fff;
  padding: 0 35rpx;
  .areaItem {
    padding-left: 5rpx;
    height: 88rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #eeeeee;
    .itemTitle {
      font-size: 28rpx;
      color: #666666;
    }
    .itemValue {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-size: 28rpx;
      color: #999;
    }
    .itemBtn {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .btn {
        padding: 8rpx 25rpx;
        font-size: 28rpx;
        color: #666666;
        text-align: center;
        border-radius: 8rpx;
        border: 1rpx dashed #c0c0c0;
        background-color: #f5f5f5;
        margin: 10rpx;
      }
    }
  }
  .addImgArea {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    .chooseImg {
      width: 90rpx;
      height: 82rpx;
    }
  }
  .btnArea {
    padding: 50rpx 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .btn {
      padding: 10rpx 30rpx;
      font-size: 24rpx;
      color: #fff;
      margin: 0 10rpx;
      border-radius: 8rpx;
    }
    .close {
      background-color: #c0c0c0;
    }
    .submit {
      background-image: linear-gradient(to right, #619df1, #4478c1);
    }
  }
}
</style>
